<script lang="ts" setup>
import Bread from '@/components/Bread.vue'
import HeaderNav from '@/components/HeaderNav.vue'
import SidebarNav from '@/components/SidebarNav.vue'

import { useMenusStore } from '@/stores'
const menusStore = useMenusStore()
</script>
<template>
  <!-- 分左右两侧，右侧分上下两侧 -->
  <div class="container-fluid">
    <div class="row vh-100">
      <!-- 左侧 -->
      <div class="col-3 col-xxl-2 px-0 d-flex flex-column">
        <!-- 标题 -->
        <div
          class="fs-4 text-light bg d-flex justify-content-center align-items-center"
          style="height: 64px"
        >
          tomic通用业务框架
        </div>
        <!-- 左侧导航：导航和选项卡 -->
        <SidebarNav :Menus="menusStore.menus" />
      </div>
      <!-- 右侧 -->
      <div class="col-9 col-xxl-10">
        <div class="row vh-100">
          <div class="container-fluid px-0 d-flex flex-column">
            <!-- 头部导航条：导航工具条 bug:切换路由之后HeaderNav就失效=>路由切换后，Bootstrap 的事件监听器丢失 -->
            <HeaderNav class="ps-2" />
            <Bread class="ps-2" />
            <!-- 主体内容 -->
            <router-view class="bg-light flex-fill p-3"></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped></style>
